<template>
	<view>
		<view class="header">
			<view class="nav">
				<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">销售额</view>
				<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">订单量</view>
			</view>
		</view>
		<view class="content" v-if="navIndex==1">
			<view class="row">
				<view class="item">
					<label>今天有效销 售总额(元）</label>
					<text>125.65</text>
				</view>
				<view class="item">
					<label>本月销售额 (元）</label>
					<text>125.65</text>
				</view>
				<view class="item">
					<label>近三个月销 售额(元）</label>
					<text>125.65</text>
				</view>
			</view>
			<view class="row">
				<view class="item">
					<label>近一年销售 额(元）</label>
					<text>125.65</text>
				</view>
				<view class="item">
					<label>未结算金额 (元）</label>
					<text>125.65</text>
				</view>
				<view class="item">
					<label>已结算金额 (元）</label>
					<text>125.65</text>
				</view>
			</view>
		</view>
		
		<view class="content" v-if="navIndex==2">
			<view class="row">
				<view class="item">
					<label>今天有效 订单量</label>
					<text>125</text>
				</view>
				<view class="item">
					<label>本月订单 量</label>
					<text>125</text>
				</view>
				<view class="item">
					<label>近三个月 订单量</label>
					<text>125</text>
				</view>
			</view>
			<view class="row">
				<view class="item">
					<label>近一年订 单量</label>
					<text>12565</text>
				</view>
				<view class="item">
					<label>未结算 订单 </label>
					<text>12</text>
				</view>
				<view class="item">
					<label>已结算 订单</label>
					<text>125</text>
				</view>
			</view>
		</view>
		<view class="total">
			<view class="head">
				<text style="font-size: 30rpx;font-weight: 500;">业绩/订单量</text>
				<text style="font-size: 24rpx;font-weight: 400;">本月</text>
			</view>
			<view class="echarts"></view>
		</view>
	</view>
</template>
<script>
export default {
	data(){
		return {
			navIndex:1
		}
	},
	methods:{
		checkIndex(index){
			this.navIndex = index
		}
	}
}
</script>
<style>
page {
	background: rgb(245, 245, 245);
}
.header {
	width: 750rpx;
	height: 140rpx;
	background: #FEB140;
	display: flex;
	position: relative;
}
.nav {
	width: 476rpx;
	display: flex;
	flex-direction: row;
	margin-left: 138rpx; 
	margin-top: 40rpx;
	justify-content: space-between;
	color: #1A1A1A;
}
.activite {
	/* font-weight: bold; */
	margin-bottom: 40rpx;
	border-bottom: 6rpx solid #1B1B1B;
}
.content {
	position: absolute;
	top: 127rpx;
	left: 0rpx;
	width: 100%;
	height: 335rpx;
	background: #FFFFFF;
	border-radius: 30rpx 30rpx 0rpx 0rpx;
}
.row {
	width: 650rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 40rpx 50rpx;
}
.item {
	display: flex;
	flex-direction: column;
	font-family: Alibaba PuHuiTi;
	line-height: 40rpx;
}
.item label {
	font-size: 24rpx;
	color: #1B1B1B;
	font-weight: 500;
}
.item text {
	font-size: 30rpx;
	color: #FF3333;
	font-weight: 400;
}
.total {
	width: 100%;
	height: 800rpx;
	margin-top: 345rpx;
	background: #FFFFFF;
}
.head {
	padding-top: 30rpx;
    font-family: Alibaba PuHuiTi;
	color: #1B1B1B;
	width: 690rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
</style>
